<template>
	<view class="demand_wrap">
		<view class="flex-col section_5">
			<text class="self-start text_2">发布人信息</text>
			<view class="flex-row items-center self-stretch mt-22">
				<image class="image_8" :src="ossUrl + detail.user.avatar" />
				<view class="flex-col flex-1 group_3 ml-10">
					<view class="flex-row items-center">
						<text class="font">{{ detail.user.username }}</text>
						<view class="ml-4 flex-col justify-start items-center text-wrapper"><text
								class="font_2">{{ detail.user.gender == 0 ? '女' : '男' }}</text></view>
						<view class="ml-4 flex-col justify-start text-wrapper_2"><text class="font_2">{{ detail.user.school_name }}</text>
						</view>
					</view>
					<view class="mt-14 flex-row items-center">
						<text class="font_3">{{ detail.user.company_position }}</text>
						<view class="section_6"></view>
						<text class="font_3">{{ detail.user.company_name }}</text>
						<view class="section_6"></view>
						<text class="font_3">{{ detail.user.company_industries }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="mt-10 flex-col section_7">
			<view class="flex-row justify-between items-center">
				<text class="font row_1" style="width: 80%;">{{ detail.title }}</text>
				<text class="font" :style="detail.audit_status == 2 ? 'color: #00000050' : 'color: #1C41F1'">{{ detail.audit_status == 2 ? '未通过' : detail.audit_status_name }}</text>
			</view>
			<view class="flex-row justify-between items-center group_4">
				<text class="font_5 text_10">{{ detail.updatetime }}</text>
				<view class="flex-row">
					<!-- <view class="flex-col justify-start items-center view" v-if="detail.type_id == 1">
						<text class="font_4">供</text>
					</view>
					<view class="flex-col justify-start items-center need" v-if="detail.type_id == 2">
						<text class="font_4">需</text>
					</view> -->
					<view class="flex-col justify-start items-center not" v-if="detail.status == 0">
						<text class="font_4">未解决</text>
					</view>
					<view class="flex-col justify-start items-center already" v-if="detail.status == 1">
						<text class="font_4">已解决</text>
					</view>
				</view>
			</view>
			<view class="flex-col items-start group_5">
				<rich-text class="font_6 text_11" :nodes="detail.content"></rich-text>
			</view>
		</view>
		
		<view class="bot_btn">
			<view class="del" @click="delSave()">删除</view>
			<view class="btn" @click="toEdit()" v-if="detail.audit_status == 0 || detail.audit_status == 2">修改</view>
			<view class="btn" @click="saveUp()" v-else-if="detail.audit_status == 1 && detail.status == 0">需求已解决</view>
			<view class="btn" v-else>已完成</view>
		</view>
	</view>
</template>

<script>
	import {
		remoteUrl,
		ossUrl
	} from '@/utils/config.js'
	import {
		task_info,
		delTask,
		updateTask
	} from '@/api/home.js'
	export default {
		data() {
			return {
				ossUrl: ossUrl,
				remoteUrl: remoteUrl,
				demand_id: '',
				detail: '',
			};
		},
		onLoad(options) {
			this.demand_id = options.id
		},
		onShow() {
			this.getInfo()
		},
		onShareAppMessage(res) { //发送给朋友
			return {
				title: '小程序分享',
				imageUrl: '',
			}
		},
		methods: {
			getInfo() {
				uni.showLoading({
					title: '加载中...'
				})
				task_info({
					id: this.demand_id
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						this.detail = res.data
					}
				})
			},
			delSave() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认删除！',
					success: function (res) {
						if (res.confirm) {
							delTask({
								id: that.detail.id
							}).then(res => {
								if (res.code == 1) {
									uni.showToast({
										title: '删除成功！',
										icon: 'none'
									})
									setTimeout(() => {
										uni.navigateBack()
									},600)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			
			saveUp() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认供需已解决？',
					success: function (res) {
						if (res.confirm) {
							updateTask({
								id: that.detail.id,
								status: 1
							}).then(res => {
								if (res.code == 1) {
									uni.showToast({
										title: '提交成功！',
										icon: 'none'
									})
									that.getInfo()
								}else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			toEdit() {
				uni.navigateTo({
					url: '/pages/pages-list/publish_demand/publish_demand?detail=' + JSON.stringify(this.detail)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.demand_wrap {
		min-height: 100vh;
		background: #f5f5f5;
		padding-top: 20rpx;
		padding-bottom: 120rpx;

		.section_5 {
			width: 690rpx;
			margin: 0 auto;
			padding: 42rpx 30rpx;
			background-color: #ffffff;
			border-radius: 10rpx;

			.text_2 {
				color: #000000;
				font-size: 32rpx;
			}

			.image_8 {
				border-radius: 120rpx;
				width: 100rpx;
				height: 100rpx;
			}

			.group_3 {
				margin-right: 40rpx;

				.font {
					font-size: 30rpx;
					color: #000000;
				}

				.text-wrapper {
					padding: 5rpx 10rpx;
					background-color: #1c41f1;
					border-radius: 4rpx;
				}

				.text-wrapper_2 {
					padding: 5rpx 10rpx;
					background-color: #70d042;
					border-radius: 4rpx;
				}

				.font_2 {
					font-size: 20rpx;
					color: #ffffff;
				}

				.font_3 {
					max-width: 150rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 24rpx;
					color: #1c41f1;
				}

				.text_6 {
					line-height: 22.44rpx;
				}

				.section_6 {
					background-color: #1c41f166;
					width: 2rpx;
					height: 24rpx;
					margin: 0 20rpx;
				}
			}
		}

		.section_7 {
			width: 690rpx;
			margin: 30rpx auto;
			padding: 37rpx 20rpx 30rpx 30rpx;
			background-color: #ffffff;
			border-radius: 10rpx;

			.font {
				font-size: 30rpx;
				color: #000000;
			}

			.view {
				padding: 3rpx 7rpx;
				background-color: #70d042;
				border-radius: 4rpx;
				margin-left: 8rpx;
			}
			
			.need {
				padding: 3rpx 7rpx;
				background-color: #f8d53a;
				border-radius: 4rpx;
				margin-left: 8rpx;
			}
			
			.not {
				padding: 3rpx 7rpx;
				background-color: #999999;
				border-radius: 4rpx;
				margin-left: 8rpx;
			}
			.already {
				padding: 3rpx 7rpx;
				border-radius: 4rpx;
				background: #1C41F1;
				margin-left: 8rpx;
			}

			.font_4 {
				font-size: 24rpx;
				color: #ffffff;
			}

			.group_4 {
				margin-top: 22rpx;

				.font_5 {
					font-size: 28rpx;
					color: #000000;
				}

				.text_10 {
					opacity: 0.5;
				}
			}

			.group_5 {
				margin-top: 30rpx;
				// margin-bottom: 120rpx;

				.font_6 {
					font-size: 28rpx;
					color: #000000;
				}

				.text_11 {
					opacity: 0.8;
				}

				.text_12 {
					margin-left: 4rpx;
				}
			}
		}
	
		.bot_btn {
			width: 100vw;
			height: 150rpx;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 2;
			display: flex;
			align-items: center;
		
			.del {
				width: 228rpx;
				padding: 20rpx 0;
				margin: 0 auto;
				text-align: center;
				color: #fff;
				font-size: 28rpx;
				border: 1rpx solid #1C41F1;
				color: #1C41F1;
				background: #fff;
				border-radius: 54rpx;
			}
			.btn {
				width: 402rpx;
				height: 80rpx;
				line-height: 80rpx;
				margin: 0 auto;
				text-align: center;
				color: #fff;
				font-size: 28rpx;
				background: #1C41F1;
				border-radius: 54rpx;
			}
		}
	}
</style>